
<template>
  <div class="home" id='home' :class='{"isiphone":$isiphone,"zore":lesstwo<3}'>
    <div class="top" @click='$router.push("/homeS")'>
      <img src="../../../wechat/static/images/dzsc_logo.png" alt="">
      <div class="one">
        <img src="../../../wechat/static/images/sy_ss.png" alt="">
        <input type="text" placeholder="输入你想购买的商品">
      </div>
    </div>
    <div class="middle">
      <div class="zero" @click='pre'>
        <swiper @on-index-change='indexChange' :auto='true' :loop='true' :list="swiperList" style="width:100%;margin:0 auto;" height="3.62rem" dots-class="custom-bottom" dots-position="center"></swiper>
      </div>
      <div class="one">
        <img src="../../../wechat/static/images/sy_tz.png" alt="">
        <!-- <swiper :auto='true' :loop='true' :list="noticeList" style="width:100%;margin:0 auto;" height="20px" dots-class="custom-bottom" dots-position="left">
        </swiper> -->
        <!-- 特卖特卖，喜迎新春大甩卖！ -->
        {{noticeList.length>0?noticeList[nIndex].title:''}}
      </div>
      <div class="two">
        <a href="javascript:;" @click='JumpB'>
          <img src="../../../wechat/static/images/sy_srh.png" alt=""> 生日汇
        </a>
        <a href="javascript:;" @click='JumpN'>
          <img src="../../../wechat/static/images/sy_njfl.png" alt=""> 年节福利
        </a>
        <a href="javascript:;" @click='JumpBu'>
          <img src="../../../wechat/static/images/sy_tjhd.png" alt=""> 团建活动
        </a>
      </div>
    </div>
    <div class="bottom">
      <h3>
        <i></i>
        热卖商品
      </h3>
      <ul>
        <li v-for="(item, index) in goodList" :key='index' @click='JumpItem(item)'>
          <img :src="item.img" alt="">
          <p>{{item.name}}</p>
          <span>¥ {{item.money}}</span>
        </li>
        <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
        <load-more :show-loading="false" tip="数据加载中..." v-show="!isloading" background-color="#fbf9fe"></load-more>
        <div class="tips-text">
          <p><a href="http://www.beian.miit.gov.cn">网站备案：粤ICP备19028417号-1</a> </p> 
        </div>
      </ul>
      <!-- <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <li v-for="(item, index) in goodList" :key="index" @click="JumpItem(item)">
            <img :src="item.img" alt>
            <p>{{item.name}}</p>
            <span>¥ {{item.money}}</span>
          </li>
          <load-more :show-loading="false" tip="暂无更多数据" v-show="isNoData" background-color="#fbf9fe"></load-more>
        </ul> -->
    </div>
    <tabbar>
      <tabbar-item selected>
        <img slot="icon" src="../../../wechat/static/images/tab_home_s.png">
        <span slot="label" style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #ec1b24;">首页</span>
      </tabbar-item>
      <tabbar-item link="/center">
        <img slot="icon" src="../../../wechat/static/images/tab_grzx_n.png">
        <span slot="label" style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #999999;">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, LoadMore, Swiper } from "vux";
import { setInterval } from "timers";
export default {
  name: "home",
  data() {
    return {
      swiperList: [],
      goodList: [],
      noticeList: [],
      nIndex: 0,
      isloading: false,
      cIndex: 0
    };
  },
  mounted() {
    this.getGoodList()
    this.getSwiperList();
    this.getNoticeList();
    localStorage.setItem('classifyVal','[]')
    localStorage.setItem('brandId','[]')
    localStorage.setItem("cityName", '');
    localStorage.setItem("cityCode", '');
    if(localStorage.getItem('golist')=='1'){
      localStorage.setItem('golist','')
      this.$router.push('./'+localStorage.getItem('classtype'))
    }
  },
  beforeCreate(){
    localStorage.setItem('userType','normal')
  },
  computed:{
    lesstwo(){
      return this.goodList.length
    }
  },
  activated(){
    console.log('activatedhome')
    localStorage.setItem('classifyVal','[]')
    localStorage.setItem('brandId','[]')
    localStorage.setItem("cityName", '');
    localStorage.setItem("cityCode", '');
  },
  created() {},
  methods: {
    indexChange(index) {
      this.cIndex = index
    },
    pre() {
      if(this.swiperList[this.cIndex].type=='goods'){
        
        let url =
          this.$CONSTANT.GOODS.findEsGoodsByGoodsCode +
          "?sessionId=" +
          this.$common.getCookie("sessionId");
        let param = {
          pageIndex:1,
          pageSize:10,
          goodsCode: this.swiperList[this.cIndex].id
        }
        //this.$vux.loading.show({
        //   text: "loading"
        // });
        this.$common.post(url, param, res => {
          setTimeout(() => {
            this.$vux.loading.hide()
          }, 500);
          if (res.status == 200) {
            var bussData = res.data.bussData;
            this.$router.push({ path: "./goodD", query: { id: bussData.id} });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
        
      }else {
        var arr = []
        this.swiperList.forEach(element => {
          if(element.type=='photo'){
            arr.push(element)
          }
        });
        wx.previewImage({
          current: this.swiperList[this.cIndex].photo, // 当前显示图片的http链接
          urls: arr.map(item=>{
            return item.photo
          }) // 需要预览的图片http链接列表
        })
      }
    },
    getSwiperList() {
      let url =
        this.$CONSTANT.GOODS.findEsAdvertiseByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {};
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          console.log(bussData); 
          var arr =[]
          bussData.forEach(element => {
            if(element.isOn=='y'){
              arr.push(element)
            }
          });
          this.swiperList = arr.map(item=>{
            return {
                url: '',
                img: item.loopPhotos.length > 0 ? item.loopPhotos[0].fileUrl : "",
                photo: item.detailPhotos.length > 0 ? item.detailPhotos[0].fileUrl : "",
                title: "",
                id:item.goodsCode,
                type: item.type
            }
          })
          console.log(this.swiperList)
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getGoodList() {
      let url =
        this.$CONSTANT.GOODS.findEsHotGoodsByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = ''
      // this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        this.isloading = true
        this.pageIndex++
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.isShow == 'y'){
              if(element.esGoodsDTO.restNum>0){
                this.goodList.push({
                  id: element.esGoodsDTO.id,
                  img:
                    element.esGoodsDTO && element.esGoodsDTO.photos.length > 0
                      ? element.esGoodsDTO.photos[0].fileUrl
                      : "",
                  name: element.esGoodsDTO ? element.esGoodsDTO.goodsName : "",
                  money: element.esGoodsDTO ? element.esGoodsDTO.price : ""
                });
              }
              if(element.esGoodsDTO.type=='real'&&element.esGoodsDTO.modelPrice){
                let arr = element.esGoodsDTO.modelPrice.split('::')
                let arr2 = []
                arr.map(item=>{
                  let arr1 = item.split('&&')
                  arr2.push({
                    name:arr1[0],
                    price:arr1[1]
                  })
                })
                this.goodList[this.goodList.length-1].money=arr2[0].price
              }
            }
          });
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getNoticeList() {
      let url =
        this.$CONSTANT.GOODS.findEsNoticeByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1,
        pageSize: 1000
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.noticeList = bussData.map(item => {
            return {
              url: "",
              img: "",
              title: item.detail
            };
          });
          var count = 10000;
          setInterval(() => {
            this.nIndex = count % this.noticeList.length;
            count--;
          }, 5000);
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    JumpItem(item) {
      this.$router.push({ path: "/goodD", query: { id: item.id } });
    },
    JumpB() {
      this.$router.push({
        path: "birPool"
      });
    },
    JumpN() {
      this.$router.push({
        path: "newYearW"
      });
    },
    JumpBu() {
      this.$router.push({
        path: "building"
      });
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    LoadMore,
    Swiper
  }
};
</script>

<style lang="less">
#home {
  // margin-bottom: 60px;
  .top {
    background: #fff;
    position: relative;
    padding: 0 11px;
    > img {
      position: absolute;
      top: 19px;
      left: 11px;
      height: 27px;
      width: 22.4%;
    }
    .one {
      background: #f7f7f7;
      display: inline-block;
      width: 64.3%;
      margin: 13px 0 13px 21px;
      border: 1px solid transparent;
      border-radius: 16px;
      margin-left: 32.3%;
      img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
        padding-left: 15px;
      }
      input {
        font-family: MicrosoftYaHeiUI;
        font-size: 13px;
        color: #333;
        border: none;
        padding: 8px 8px;
        background: #f7f7f7;
        width: 55%;
      }
    }
  }
  .middle {
    // margin-top: 15px;
    // padding: 0 10px;
    background: #fff;
    .vux-slider {
      .vux-swiper {
        border: 1px solid transparent;
        border-radius: 7px;
      }
    }
    .one {
      padding: 15px 10px 0;
      background: #fff;
      border: none;
      box-shadow: 0;
      font-size: 14px;
      color: #333;
      font-family: PingFang-SC-Medium;
      img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 4px;
      }
    }
    .two {
      text-align: center;
      padding: 20px 30px;
      font-size: 0;
      a {
        display: inline-block;
        width: 33%;
        font-size: 12px;
        color: #999;
        font-family: PingFang-SC-Medium;
        text-align: center;
        img {
          width: 59px;
          height: 59px;
          display: block;
          margin: 0 auto 3px;
        }
      }
    }
  }
  .bottom {
    margin: 10px;
    h3 {
      font-family: PingFang-SC-Bold;font-weight: 600;
      font-size: 19px;
      color: #333;
      padding-left: 10px;
      padding-top: 19px;
      margin-bottom: 20px;
      i {
        display: inline-block;
        width: 3px;
        height: 19px;
        background: #ff4a68;
        border: 1px solid transparent;
        border-radius: 2px;
        margin-right: 7px;
        position: relative;
        top: 3px;
      }
    }
    ul {
      li {
        display: inline-block;
        width: 48.15%;
        background: #fff;
        border: 0px solid transparent;
        border-radius: 5px;
        margin-bottom: 10px;
        img {
          display: inline-block;
          width: 100%;
          height: 46.1%;
          height: 173px;
          object-fit: contain;
        }
        p {
          // padding: 12px;
          padding: 2.6%;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-family: PingFang-SC-Bold;font-weight: 600;
          color: #333;
          font-size: 14px;
          height: 34px;
          // height: 9%;
        }
        span {
          display: inline-block;
          font-family: PingFang-SC-Bold;font-weight: 600;
          color: #ea030b;
          font-size: 14px;
          margin: 0 12px 12px 12px;
        }
        &:nth-child(2n) {
          float: right;
        }
      }
    }
  }

  .weui-tabbar {
    position: fixed;
    .weui-tabbar__item {
      img {
        width: 21px;
        height: 21px;
        margin-top: 3px;
      }
    }
    .weui-bar__item_on {
      img {
        width: 23px;
        height: 21px;
      }
      .weui-tabbar__label {
        span {
          font-family: PingFang-SC-Medium;
          font-size: 12px;
          color: #ec1b24;
        }
      }
    }
    &:before {
      border: none;
    }
  }
}
</style>
